// eslint-disable-next-line no-unused-vars
import VXETable, { Column } from 'vxe-table'
import { RecordTipsMap, SendStateMap, InStockTypeMap } from '@Components/assets/js/config'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

function getMap(type) {
  const list = { RecordTipsMap, SendStateMap, InStockTypeMap }
  return list[type]
}

const Bem = createBem(`${tableNamespace}__tag`)

VXETable.renderer.add('Tag', {
  renderDefault(h, renderOpts, params) {
    const { row, column } = params

    const { options = {} } = renderOpts
    /**@type  { { type: "RecordTipsMap" | "SendStateMap" | "InStockTypeMap" | undefined } }*/
    const { type, map } = options
    const rawValue = row[column.property]

    let cellValue = rawValue
    let renderList = []
    const list = map || getMap(type)
    if (!list) {
      console.error('使用 Tag 渲染器必须传入 type 或者 map 对象')
    }
    if (typeof rawValue === 'string' || typeof rawValue === 'number') {
      cellValue = [rawValue]
    }

    cellValue?.forEach(i => {
      const item = list[i]
      if (item) {
        item.tip = i
        renderList.push(item)
      }
    })

    const colorClass = item => {
      if (!map) {
        return `${type}-${item.tip}`
      }
      return ''
    }
    const lineStyle = item => {
      if (map) {
        return {
          backgroundColor: item.color
        }
      }
    }

    return [
      <div class={Bem()}>
        {renderList.map((tagItem, index) => (
          <span
            title={tagItem.content}
            class={`${Bem('item')} ${colorClass(tagItem)}`}
            style={lineStyle(tagItem)}
            key={tagItem.tip + index}
            data-text={tagItem.title}
          >
            <span style="display:none">
              {tagItem.content}
              {index !== renderList.length - 1 && `，`}
            </span>
          </span>
        ))}
      </div>
    ]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'tooltip',
  align: 'center'
}
